<script lang="ts" setup>
import { ref } from 'vue'
import { getSelectListApi } from '@/apis/common'
import type { SelectItem } from '@/types/common'

// 获取属性值
interface PropsJkSelect {
  width?: number,
  modelValue: number | string | null | undefined
}
const props = withDefaults(defineProps<PropsJkSelect>(), {
  width: 200,
})

// 获取频道列表
const selectList = ref<SelectItem[]>([])
const getSelectList = async () => {
  const res = await getSelectListApi()
  selectList.value = res.data.data.channels
}
getSelectList()

// 回传数据
const emits = defineEmits(['update:modelValue'])

// 使用 computed 来确保 v-model 的双向绑定
const val = computed({
  get: () => props.modelValue,
  set: (value) => {
    emits('update:modelValue', value)
  }
})

// 监听 modelValue 的变化以同步到 val
watch(() => props.modelValue, (newVal) => {
  val.value = newVal
})
</script>

<template>
  <!-- 频道 -->
  <el-select
    v-model="val"
    clearable
    placeholder="请选择"
    :style="`width: ${props.width}px; height: 40px`"
  >
    <el-option
      v-for="item in selectList"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>

<style lang="less" scoped>
:deep(.el-tooltip__trigger) {
  height: 40px;
}
</style>
